<template>
    <div class="search-container">
        <div style="text-align: center">
            <img src="../../static/pictures/kitty.svg" id="logo">
        </div>
        <DirectionSelector id="dict-direction-container" :style="{height: directionPanelIsOpened ? '140px' : 0}" v-model="currentLanguage" :data="languages" @onChange="directionPanelIsOpened=false" />
        <div id="search-bar">
            <Input v-model="keyWord" id="search" @click="paste" :rtl="currentLanguage.sourceRtl" @keyup.up.native="minus" @keyup.down.native="plus">
                <ButtonGroup slot="prepend" style="width: 120px;">
                    <Button @click="search" icon="md-search"></Button>
                    <Button icon="md-book" @click="directionPanelIsOpened = !directionPanelIsOpened"></Button>
                    <Button icon="md-clipboard" @click="paste"></Button>
                </ButtonGroup>
                <span slot="append">
                    <Select slot="append" v-model="searchMode" style="width: 110px;">
                        <Option v-for="item in searchModes" :key="item.value" v-bind:value="item.value">{{ item.name }}</Option>
                    </Select>
                </span>
            </Input>
        </div>
        <div id="content-container" >
            <Split v-model="splitValue" id="content-splitter">
                <div slot="right" id="key-panel">
                  <CandidateList id="key-container" :style="{direction: currentLanguage.sourceRtl ? 'rtl' : 'ltr'}" v-model="selectedWord" :data="result.items" :keyWord="keyWord" @onSelectedIndexChanged="selectedWordIndex = $event"/>
                  <ButtonGroup id="page-control-button-group" shape="circle">
                    <Button @click="rewind" style="width: 100px;" icon="ios-rewind"></Button>
                    <Button @click="forward" style="width: 100px;" icon="ios-fastforward"></Button>
                  </ButtonGroup>
                </div>
                <ContentViewer slot="left" :keyWord="keyWord" :languageDirection="currentLanguage" :item="selectedWord" id="word-content-container"/>
            </Split>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$primary-color: #3ba776;

#logo {
  width: 128px;
  margin: {
    top: 20px;
  }

  border: {
    // style: solid;
    // radius: 100px;
    // width: 1px;
    // color: rgb(235, 235, 235);
  }
}
.search-container {
  display: flex;
  flex-direction: column;
  // background-color: green;
}

$search-bar-height: 60px;
#search-bar {
  // background-color: orange;
  height: $search-bar-height;
  line-height: $search-bar-height;
  text-align: center;
  direction: ltr;
  margin-top: 0px;
}
#search {
  width: 550px;
}

#content-container {
  flex-grow: 1;
  // background-color: rgb(112, 123, 218);

  display: flex;
  flex-direction: column;

  margin-top: 18px;

  align-items: center;
}

#content-splitter {
  // background-color: rgb(0, 117, 72);
  flex-grow: 1;
  max-width: 1024px;
  // margin-bottom: 50px;
  border: {
    style: solid;
    width: 1px;
    color: rgb(235, 235, 235);
  }
}

.ivu-input-group {
  display: inline-table;
}




#key-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
}



#page-control-button-group {
  padding: 8px;
  border: solid 1px rgb(235, 235, 235);
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

#dict-direction-container {
  // background-color:#3ba776;
  overflow: hidden;
}



</style>

<style lang="scss">
.right-pane {
  display: flex;
  // background-color: red;
}
</style>


<script>
import webApi from "../webApi.js";
import notice from "./notice";
import store from "../store"
import DirectionSelector from "./DirectionSelector"
import CandidateList from "./CandidateList"
import lintWordsWithOddWord from "./linter"
import ContentViewer from "./ContentViewer"

export default {
  components: {
    DirectionSelector,
    CandidateList,
    ContentViewer,
  },
  data() {
    return {
      keyWord: "",
      searchMode: "StartsWith",
      splitValue: 0.618,
      currentLanguage: {
        source: "ئاپتوماتىك",
        destination: "ئاپتوماتىك",
        sourceRtl: false,
        destinationRtl: false,
        code: "auto-auto"
      },
      result: {
        code: "auto-auto",
        items: []
      },
      selectedWord: {
        key: "",
        value: ""
      },
      selectedWordIndex: 0,
      pageIndex: 0,
      directionPanelIsOpened: false,
      languages: [],
    };
  },
  methods: {
    async SignIn() {
      let data = await webApi.signIn("admin", "admin");
      console.log(data.name);
    },
    async search() {
      if (this.keyWord == "") return;
      this.result = (await webApi.search(this.keyWord, this.searchMode, this.currentLanguage.code, this.pageIndex, 50)).data;
      if (this.result.items.length > 0) 
      {
        this.selectedWord = this.result.items[0];
        this.selectedWordIndex = 0
      }

      this.directionPanelIsOpened = false

      let condition = this.currentLanguage.code == "auto-auto"
      condition |= this.currentLanguage.code.split("-").filter(item => this.result.code.indexOf(item) != -1).length > 0

      if (condition) {
        this.currentLanguage = this.languages.filter(item => item.code == this.result.code)[0]
      }
    },
    async paste(){
      this.keyWord = ""
      document.getElementsByClassName("ivu-input-default")[0].focus()
      if (!document.execCommand("Paste")){
        notice.pasteFromClipboardNotSupported()
      }
    },
    lintWordsWithOddWord: lintWordsWithOddWord,
    rewind(){
      if (this.pageIndex > 0){
        this.pageIndex--
        this.search()
      }
    },
    forward(){
      this.pageIndex++
      this.search()
    },
    dictDirectionSelected(dict){
      this.currentLanguage = dict
      this.directionPanelIsOpened = false
    },
    plus(){
      if (this.selectedWordIndex < this.result.items.length) this.selectedWordIndex++
    },
    minus(){
      if (this.selectedWordIndex > 0) this.selectedWordIndex--
    }
  },
  computed: {
    searchModes() {
      return [
        { name: "بىشىدىن ئىزدەش", value: "StartsWith" },
        { name: "ئىچىدىن ئىزدەش", value: "Contains" },
        { name: "ئاخىرىدىن ئىزدەش", value: "EndsWith" }
      ];
    },
  },
  watch: {
    async keyWord(newValue, oldValue) {
      this.pageIndex = 0
      await this.search()
    },
    selectedWordIndex(newValue, oldValue){
      if(this.result.items.length > 0) this.selectedWord = this.result.items[newValue]
    }
  },
  async created() {
    let result = await webApi.listDirections()
    result.data.push({
      source: "ئاپتوماتىك",
      destination: "ئاپتوماتىك",
      sourceRtl: false,
      destinationRtl: false,
      code: "auto-auto"
    })
    this.languages = result.data
  }
};
</script>
